<template>
	<view>
		<view  style="height: 100rpx;"></view>
		<view class="foot" >
			<view class="page-footer" id="target" >
                
				<view class="foot-item" v-for="(item,index) in menuList" :key="index"
					@click="goRouter(item,index)">
                    <view class="middle" v-if="index==1">
                        <image src="../static/images/panel.png" mode=""></image>    
                    </view>
					<block v-else-if="item.link == activeRouter">
						<image :src="item.imgList[1]"></image>
						<view class="txt" style="color:#fff">{{item.name}}
						</view>
					</block>
					<block v-else>
						<image :src="item.imgList[0]"></image>
						<view class="txt" >{{item.name}}</view>
					</block>
                    
				</view>
			</view>
		</view>
        <uni-popup ref="choseType" borderRadius="15px" is-mask-click="false" type="bottom">
            <view class="choseType">
                    <view class="choseText" @click="chosedCreateType(1)">
                        <image :src="img1" mode="widthFix"></image>
                        <text style="color: #fff;font-size: 28rpx;">从零设计</text>
                        <text style="color: #999;font-size: 24rpx;">文字描述设计产品</text>
                    </view>
                    <view class="chosePicture"@click="chosedCreateType(2)">
                        <image :src="img2" mode="widthFix"></image>
                        <text  style="color: #fff;font-size: 28rpx;">裸石设计</text>
                        <text style="color: #999;font-size: 24rpx;">在您的裸石上进行设计</text>
                    </view>
            </view>
        </uni-popup>
        <view class="settlementAgreement" v-if="showProtocol">
            <view class="setAgCount">
                <i class="icon iconfont icon-cha" @click="showProtocol = false"></i>
                <div class="title">AI珠宝设计须知</div>
                <view class="content" v-if="choseType=='1'" >
                    <!-- <jyf-parser  style="color: #fff;" :html="choseType=='1'?protocol:protocol1" ref="article" :tag-style="tagStyle"></jyf-parser> -->
                您可在该页面选择材质与首饰类别，以及您的灵感
                    <br />
                    即可生成属于您的珠宝产品图
                       <br />
                    注意：
                       <br />
                    蓝港AI深度适配珠宝设计，在AI珠宝设计方面模型表现效果优异，但由于AI的不可控性，小概率会出现与设计灵感不相符合或者违背常规的成果图，敬请谅解。 
                     <br />
                    <!-- <view v-html="protocol"></view> -->
                </view>
                <view class="content" v-else >
                  
                  您可将您的裸石上传至小程序
                  <br />
                  并选择款式与首饰类别
                      <br />
                  我们将为您进行AI设计
                      <br />
                  注意：
                      <br />
                  珠宝裸石设计为蓝港AI首创，技术难度高，提供的基本材质以及款式较少，尽请谅解
                      <br />
                  蓝港AI深度适配珠宝设计，在AI珠宝设计方面模型表现效果优异，但由于AI的不可控性，小概率会出现与设计灵感不相符合或者违背常规的成果图，敬请谅解。
                    <!-- <jyf-parser  style="color: #fff;" :html="choseType=='1'?protocol:protocol1" ref="article" :tag-style="tagStyle"></jyf-parser> -->
                 
                     <br />
                    <image v-if="choseType=='2'&&protocolImg"  style="width: 400rpx;" :src="protocolImg" mode="widthFix"></image>
                    <!-- <view v-html="protocol"></view> -->
                </view>
                <view class="go" @click="go">
                    我已知悉 前往设计
                </view>
            </view>
        </view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | ju [星际明星娱乐-寻找好声音]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2024 https://jufeiniu.com/ All rights reserved.
	// +----------------------------------------------------------------------
	// | Author: 巨说还行-乔欣弥弥-巨肥牛 <jufeiniu@163.com>
	// +----------------------------------------------------------------------
	// | Personal site: https://jufeiniu.com/
	// +----------------------------------------------------------------------
    import parser from "@/components/jyf-parser/jyf-parser";
    import {syInfo} from '@/api/ai.js'
	export default{
		props: {
			
			activeRouter: {
				type: String,
				default: '',
			}
		},
        components: {
            "jyf-parser": parser,
            
        },
		data(){
			return {
                    menuList:[
                        {  
                            name:'首页',
                           imgList:[ require('@/static/images/1-001.png') ,require('@/static/images/1-002.png')],
                           link:'/pages/index/index'
                        },
                        {
                         
                           imgList:['',''],
                           link:'/pages/plantGrass/plant_release/index'
                        },
                        {
                            name:'我的',
                           imgList:[ require('@/static/images/4-001.png') ,require('@/static/images/4-002.png')],
                           link:'/pages/user/index'
                        },
                    ],
                    tagStyle: {
                        img: 'width:100%;display:block;'
                    },
                    protocol:"",
                    img1:'',
                    img2:'',
                    showProtocol:false,
                    protocolImg:"",
                    choseType:"",
                    
                    
			}
		},
		mounted() {
                this.getProtocl()
		},
		methods:{	
            getProtocl(){
                
                syInfo({cate_id:'55'}).then(res=>{
                    console.log(res)
                    this.img1 = res.data.data[0].image_link
                    this.img2 = res.data.data[1].image_link
                })
                    syInfo({pinyin:'promot_xieyi'}).then(res=>{
                        
                        this.protocol=res.data.data[0].name
                        console.log(this.protocol)
                    })
                    syInfo({pinyin:'promot_xieyi_tu'}).then(res=>{
                        console.log(res)
                        this.protocol1=res.data.data[0].name
                        console.log(this.protocol1)
                        this.protocolImg = res.data.data[0].image_link
                    })
            },
            go(){
                this.showProtocol=false
              this.$refs.choseType.close()  
              uni.navigateTo({
                  url:'/pages/plantGrass/plant_release/index?type='+ this.choseType
              })
            },
			goRouter(item,index) {
				var pages = getCurrentPages();
				var page = (pages[pages.length - 1]).$page.fullPath;
				if (item.link == page) return
                let paramStr = uni.getStorageSync('paramStr')
                
                if(index==1){
                    if(paramStr){
                        uni.navigateTo({
                            url:'/pages/plantGrass/plant_waiting/index?paramsStr='+paramStr
                        })
                        return
                    }else{
                        this.$refs.choseType.open()  
                        // this.showProtocol=true
                        
                    }
                   return
                }
				uni.switchTab({
					url: item.link,
					fail(err) {
						uni.navigateTo({
							url: item.link
						})
					}
				})
			},
                
            chosedCreateType(type){
                // this.$refs.choseType.close()
                this.choseType=type
                this.showProtocol=true
                
            }
		}
	}
	
</script>

<style lang="scss" scoped>
    .choseType{
        height: 400rpx;
        width: 100%;
        background-color: #222;
        display: flex;
        border-radius: 30rpx 30rpx 0 0;
        justify-content: space-around;
        padding-top: 50rpx;
        view{
            background: #333;
            width: 300rpx;
            height: 270rpx;
            border-radius: 12rpx;
            padding: 20rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        image{
            width: 200rpx;
        }
        
    }
	.page-footer {
		position: fixed;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		height: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		box-sizing: border-box;
		border-top: 1px solid #101010;
		background-color: #101010;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		&.filter{
			filter: blur(2rpx);
		}
		.foot-item {
			display: flex;
			width: max-content;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
            width:20%;
            color: #fff;
			.count-num {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40rpx;
				height: 40rpx;
				top: 0rpx;
				right: -15rpx;
			
				font-size: 20rpx;
				background-color: #fff;
				border-radius: 50%;
				padding: 4rpx;
			}
		}
		.foot-item image {
			height: 40rpx;
			width: 40rpx;
			text-align: center;
			margin: 0 auto;
		}
		.foot-item .txt {
			font-size: 24rpx;
		}
        .middle{
            border: 8rpx solid #fff;
            border-radius: 50%;
            width: 100rpx;
             height: 100rpx;
             display: flex;
             align-items: center;
             justify-content: center;
             margin-bottom: 60rpx;
            
        }
	}
    .settlementAgreement {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 9999;
    }
    
    .settlementAgreement .setAgCount {
        background: #333;
        width: 656rpx;
        height: 458px;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 12rpx;
        -webkit-border-radius: 12rpx;
        padding: 52rpx;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        overflow: hidden;
        z-index: 99999;
        .content {
            height: 900rpx;
            overflow-y: scroll;
    
            /deep/ p {
                font-size: 13px;
                line-height: 22px;
                color: #fff;
            }
    
            /deep/ img {
                max-width: 100%;
            }
        }
    }
    
    .settlementAgreement .setAgCount .icon {
        font-size: 42rpx;
        color: #b4b1b4;
        position: absolute;
        top: 15rpx;
        right: 15rpx;
    }
    
    .settlementAgreement .setAgCount .title {
        color: #fff;
        font-size: 32rpx;
        text-align: center;
        font-weight: bold;
    }
    
    .settlementAgreement .setAgCount .content {
        margin-top: 32rpx;
        color: #fff;
        font-size: 26rpx;
        line-height: 22px;
        text-align: justify;
        text-justify: distribute-all-lines;
        height: 556rpx;
        overflow-y: scroll;
    }
    .go{
        background:#705FA9;
        color:#fff;
        width: 500rpx;
        height: 80rpx;
        border-radius: 40rpx;
        text-align: center;
        font-size: 30rpx;
        margin: 20rpx auto;
        line-height: 80rpx;
    }
</style>
